<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
      xmlns:sec="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div th:fragment="userTable">
    <script>
    function getTableSettings(){
        return { 	//[bootstrap表格]
            url: ctxPath +'/System/User/listPage',    //请求后台的 URL
            method: 'GET',                      //请求方式 (*)
            //toolbar: '#toolbar',              //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存, 默认为 true
            pagination: true,                   //是否显示分页(*)
            sortable: true,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            sidePagination: "server",           //分页方式: client客户端分页，server服务端分页(*)
            pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
            pageSize: 10,                       //每页的记录行数(*)
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数(*)
            iconsPrefix: 'mdi', // 自定义表格右上角的图标，这个必须要定义，因为不是官方模板，icon图标样式名字不同会导致图标无法显示
            icons:  {
                refresh: 'mdi-refresh',              // 刷新图标
                columns: 'mdi-format-list-bulleted', // 列图标
                toggleOff: 'mdi-toggle-switch-off',  // 切换光
                toggleOn: 'mdi-toggle-switch',       // 切换开
                detailOpen: 'mdi-plus',              // 详情开
                detailClose: 'mdi-minus',            // 详情光
                fullscreen: 'mdi-fullscreen'         // 全屏图标
            },
            search: false,                      //是否显示表格搜索
            strictSearch: true,
            showColumns: true,                  //是否显示所有的列（选择显示的列）
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            //height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "id",                     //每一行的唯一标识，一般为主键列
            showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                  //是否显示父子表
            singleSelect: false, //开启单选,想要获取被选中的行数据必须要有该参数

            /* 上传服务器的参数  */
            queryParams : function( params ) {
                /* 传到后台的参数   offset  page */
                console.log("params:");
                console.log( params );
                //params.offset
                var temp = {
                    page: (params.offset / params.limit) + 1,   //页码
                    limit: params.limit,      //每页显示数量
                    username:params.username,
                    email:params.email
                };
                return temp;
            },

            /*  表格中的列设置   */
            columns: [
                { align : 'center', checkbox: true },
                {
                    field: 'id',
                    title: '用户编号'
                }, {
                    field: 'username',
                    title: '用户名'
                }, {
                    field: 'email',
                    title: '邮件'
                }, {
                    field: 'sex',
                    title: '性别',
                    align: 'center',
                    formatter:sexFormatter
                }, {
                    field: 'tel',
                    title: '电话'
                }, {
                    field: 'createTime',
                    title: '创建时间'
                }, {
                    //角色格式化处理, 调用 [headImgFormatter] 方法
                    field: 'headImg',
                    title: '头像',
                    formatter:headImgFormatter
                }, {
                    field: 'roleName',
                    title: '所属角色'
                },{
                    //操作格式化处理 即编辑 删除  调用optFormatter方法
                    field: 'doOpt',
                    title: '操作',
                    formatter : optFormatter
             }]
        };
    }

    function sexFormatter( value, row, index ){
        return row.sex;
    }

    function optFormatter(value,row, index){
        var c = '<a class="btn btn-xs btn-default" href="#!" onclick=\'edit("'+
            row.id + '")\' title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>';
        var e = '<div class="btn btn-xs btn-default"  href="#!" onclick="del(\''+
            row.id+'\')" title="删除"  data-toggle="tooltip"><i class="mdi mdi-window-close"></i><div/> ';
        return c + e ;
    }

    function headImgFormatter(value,row, index){
        var _css = " style=\"height:35px;width:35px;border-radius:50%;"+
            "line-height:50px!important;\" ";
        var _src = " src=\""+ ctxPath +"/System/User/showHeadImage/"+
            row.headImg +"\" ";
        return "<img "+ _css + _src +"\" />";
    }

    /* row 行包含了 roles 集合 [ 已废弃 ] */
    function rolesFormatter(value,row, index){
        if( row.roles.length > 0 ){  //[roles] 集合
            var roleStr = "";
            /* roles 不为空 把 roles 的 name 展示出来 */
            for(var i=0; i<row.roles.length; i++){
                roleStr += " <span class=\"label label-warning\">"+row.roles[i].name+"</span>"
            }
            return roleStr;
        }
        /* 为空 */
        return "<span class=\"label label-danger\">未分配角色</span>";
    }
    </script>
</div>

</body>
</html>
